<template>
    <div class="login-container">
        <!-- 登录的导航 -->
        <LoginHeader>
            <div class="login-nav-center">
            </div>
        </LoginHeader>
        <!-- logo -->
        <div class="login-logo">
            <img src="../../assets/logo.png">
        </div>
        <!-- 按钮 -->
        <div class="login-buttom">
            <van-button type="danger" class="login-button-top" @click="toPhoneLogin">
                <i class="my-icon">&#xe663;</i>
                手机号快捷登录</van-button>
            <van-button class="login-button-button" @click="toRegister">
                <i class="my-icon">&#xe908;</i>
                去注册
            </van-button>
        </div>
        <router-view></router-view>
        <!-- 底部 -->
        <footer class="login-footer">
                <ul>
                    <li>
                        <i class="my-icon">&#xe69a;</i>
                        <span>微信</span>
                    </li>
                    <li>
                        <i class="my-icon">&#xe882;</i>
                        <span>qq</span>
                    </li>
                    <li>
                        <i class="my-icon">&#xe600;</i>
                        <span>微博</span>
                    </li>
                </ul>
        </footer>
    </div>
</template>

<script setup lang="ts">
    import LoginHeader from '@/components/LoginHeader/index.vue'
    import {useRouter ,useRoute} from 'vue-router';
    // import { ref, onMounted } from "vue";
    // import homeApi from '@/api/home';
    // import router from "@/router";
    // const router = useRouter()

    const route = useRoute()
    const router = useRouter();


function toRegister() {
    router.push(`/login/register`)
}
    //定义事件回调
    //手机登录事件回调
    const toPhoneLogin=()=>{
        if(route.query.redirect){
            router.push(`/phoneLogin?redirect=${route.query.redirect}`)
        }else {
            router.push('/phoneLogin')
        }
    }
</script>

<style lang="less" scoped>
.login-container {
    width: 100%;
    height: 667px;
    position: relative;

    // 头部导航
    .login-nav-center {
            width: 86px;
            height: 27px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 15px auto;
            font-size: 20px;
            font-weight: bold;
            background: url('../../assets/icon.png') -78px -211px;
            background-size: 235px;
            // background-position: 399 0 126 0;
        }

    //log
    .login-logo {
        width: 100%;
        height: 45px;
        text-align: center;
        padding-top: 80px;

        img {
            width: 134px;
            height: 45px;
        }
    }

    // 按钮
    .login-buttom {
        width: 345px;
        height: 110px;
        padding: 0 15px;
        padding-top: 50px;
        text-align: center;

        .login-button-top {
            width: 335px;
            height: 47px;
            margin-bottom: 15px;
        }

        .login-button-button {
            width: 335px;
            height: 47px;
            margin-bottom: 15px;
        }
    }

    //底部
    .login-footer {
        position: absolute;
        width: 100%;
        height: 20px;
        bottom: 40px;        
            ul {
                width:270px;
                height: 20px;
                margin: 0 auto;
                li {
                    // display: inline;
                    float: left;
                    font-size: 16px;
                    border-left: 1px solid #333;
                    padding:  0 20px;
                    color: #555;
                    &:first-child{
                    border: 0;
                }
                span{
                    padding-left:5px;
                }
                }
        }
    }

}

// @font-face {
//   font-family: 'my-icon';
//   src: url('./my-icon.ttf') format('truetype');
// }

// .my-icon {
//   font-family: 'my-icon';
// }

// .my-icon-extra::before {
//   content: '\e626';
// }
</style>
